
<template>
  <view class="page-container">
    <!-- 图片轮播 -->
    <swiper class="image-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(image, index) in bannerImages" :key="index" @tap="navigateToActivity(index)">
        <image :src="image" class="swiper-image" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <!-- 快捷入口 -->
    <view class="quick-access-grid">
      <view class="quick-item" @tap="navigateTo('/pages/activity/activity')">
        <image class="icon" src="/static/icon/活动.png" mode="aspectFit"></image>
        <text>爆款活动</text>
      </view>
      <view class="quick-item" @tap="navigateTo('/pages/package/package')">
        <image class="icon" src="/static/icon/套餐.png" mode="aspectFit"></image>
        <text>装修套餐</text>
      </view>
      <view class="quick-item" @tap="navigateTo('/pages/cal/cal-wx')">
        <image class="icon" src="/static/icon/报价.png" mode="aspectFit"></image>
        <text>算报价</text>
      </view>
      <view class="quick-item" @tap="navigateTo('/pages/staff/designer')">
        <image class="icon" src="/static/icon/设计师.png" mode="aspectFit"></image>
        <text>找设计师</text>
      </view>
      <view class="quick-item" @tap="navigateTo('/pages/store/store')">
        <image class="icon" src="/static/icon/门店列表.png" mode="aspectFit"></image>
        <text>附近门店</text>
      </view>
      <view class="quick-item" @tap="navigateTo('/pages/case/case')">
        <image class="icon" src="/static/icon/案例.png" mode="aspectFit"></image>
        <text>看案例</text>
      </view>
      <view class="quick-item" @tap="navigateTo('/pages/case/case')">
        <image class="icon" src="/static/icon/攻略.png" mode="aspectFit"></image>
        <text>装修攻略</text>
      </view>
      <view class="quick-item" @tap="navigateTo('/pages/case/case')">
        <image class="icon" src="/static/icon/知识库查询.png" mode="aspectFit"></image>
        <text>装修知识</text>
      </view>
    </view>

    <!-- 服务卡片 -->
    <view class="service-cards">
      <view class="card-item" @tap="toMaterial()">
        <image class="card-img" src="/static/banner/banner2.jpeg" mode="aspectFill"></image>
        <view class="card-content">
          <text class="card-title">材料商城</text>
        </view>
      </view>
    </view>


    <!-- 精选推荐 -->
    <view class="recommend-section">
      <view class="section-header">
        <scroll-view class="tabs" scroll-x>
          <text
              class="tab"
              :class="{ 'tab-active': activeTab === 'case' }"
              @tap="switchTab('case')"
          >
            装修案例
          </text>
          <text
              class="tab"
              :class="{ 'tab-active': activeTab === 'strategy' }"
              @tap="switchTab('strategy')"
          >
            装修攻略
          </text>
          <text
              class="tab"
              :class="{ 'tab-active': activeTab === 'decorate' }"
              @tap="switchTab('decorate')"
          >
            装修知识
          </text>
        </scroll-view>
      </view>

      <!-- 内容区域 -->
      <view class="content-wrapper">
        <!-- 装修案例 -->
        <view v-if="activeTab === 'case'" class="content-item">
          <view class="grid-container">
            <view
                v-for="(item, index) in caseList"
                :key="index"
                class="grid-item"
                @tap="viewCaseDetail(item)"
            >
              <image :src="item.image" class="item-image" mode="aspectFill"></image>
              <view class="item-info">
                <text class="item-title">{{ item.title }}</text>
                <view class="item-meta">
                  <text class="meta-text">{{ item.area }} · {{ item.style }} · {{ item.size }}㎡</text>
                </view>
                <view class="item-footer">
                  <text class="footer-text">{{ item.location }}</text>
                  <view class="action-group">
                    <text class="action-text">{{ item.author }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 装修攻略 -->
        <view v-if="activeTab === 'strategy'" class="content-item">
          <view class="grid-container">
            <view
                v-for="(item, index) in strategyList"
                :key="index"
                class="grid-item"
                @tap="viewStrategyDetail(item)"
            >
              <image :src="item.image" class="item-image" mode="aspectFill"></image>
              <view class="item-info">
                <text class="item-title">{{ item.title }}</text>
                <view class="item-meta">
                  <text class="meta-text">{{ item.description }}</text>
                </view>
                <view class="item-footer">
                  <text class="footer-text">{{ item.author }}</text>
                  <text class="like-count">☆ {{ item.likes }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 装修 -->
        <view v-if="activeTab === 'decorate'" class="content-item">
          <view class="grid-container">
            <view
                v-for="(item, index) in decorateList"
                :key="index"
                class="grid-item"
                @tap="viewDecorateDetail(item)"
            >
              <image :src="item.image" class="item-image" mode="aspectFill"></image>
              <view class="item-info">
                <text class="item-tag">{{ item.tag }}</text>
                <text class="item-title">{{ item.title }}</text>
                <view class="item-meta">
                  <text class="meta-text">{{ item.description }}</text>
                </view>
                <view class="item-footer">
                  <text class="footer-text">{{ item.author }}</text>
                  <text class="like-count">☆ {{ item.likes }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/pages/home/home.scss';
</style>

<script>export default {
  data() {
    return {
      activeTab: 'case', // 默认激活的tab

      // 添加轮播图数据
      bannerImages: [
        '/static/banner/banner1.png',
        '/static/banner/banner2.png',
        '/static/banner/banner3.png'
      ],

      // 装修案例数据
      caseList: [
        {
          image: '/static/show/show1.png',
          tag: '现代简约',
          title: '150平实景现代原木风，滤镜无法复制的温柔...',
          area: '三居',
          style: '现代简约',
          size: '180',
          location: '仁恒滨江园',
          author: '王杰',
          likes: 120
        },
        {
          image: '/static/show/show1.png',
          tag: '轻奢',
          title: '现代简约风格之家，打造舒适生活新体验',
          area: '两居',
          style: '轻奢',
          size: '120',
          location: '万科城',
          author: '李娜',
          likes: 143
        },
        {
          image: '/static/show/show1.png',
          tag: '北欧',
          title: '北欧风格小户型改造，空间利用率提升50%',
          area: '一居',
          style: '北欧',
          size: '60',
          location: '中海国际社区',
          author: '张伟',
          likes: 89
        },
        {
          image: '/static/show/show1.png',
          tag: '中式',
          title: '新中式风格大宅，传统与现代的完美融合',
          area: '四居',
          style: '中式',
          size: '240',
          location: '融创江南府',
          author: '陈明',
          likes: 156
        }
      ],

      // 装修攻略数据
      strategyList: [
        {
          image: '/static/show/show2.png',
          tag: '装修技巧',
          title: '装修避坑指南：这10个常见问题一定要注意',
          description: '详细讲解装修过程中常见的陷阱和解决方案',
          author: '装修专家',
          likes: 234
        },
        {
          image: '/static/show/show2.png',
          tag: '材料选择',
          title: '如何选择环保装修材料？一看就会',
          description: '详细介绍各类装修材料的优缺点及选购建议',
          author: '建材顾问',
          likes: 187
        },
        {
          image: '/static/show/show2.png',
          tag: '预算规划',
          title: '装修预算分配方案，合理控制成本',
          description: '分享实用的装修预算分配方法和技巧',
          author: '财务专家',
          likes: 165
        },
        {
          image: '/static/show/show2.png',
          tag: '设计灵感',
          title: '2024年最新家居设计趋势解析',
          description: '分析当前流行的家居设计风格和元素',
          author: '设计师',
          likes: 201
        }
      ],

      // 装修数据
      decorateList: [
        {
          image: '/static/show/show2.png',
          tag: '客厅',
          title: '现代简约客厅设计，打造舒适生活空间',
          description: '分享客厅装修的设计理念和实用技巧',
          author: '室内设计师',
          likes: 198
        },
        {
          image: '/static/show/show2.png',
          tag: '卧室',
          title: '温馨卧室设计，营造舒适睡眠环境',
          description: '卧室装修的要点和注意事项',
          author: '家居顾问',
          likes: 176
        },
        {
          image: '/static/images/decorate3.jpg',
          tag: '厨房',
          title: '开放式厨房设计，让烹饪成为享受',
          description: '开放式厨房的设计方案和实用建议',
          author: '厨房设计师',
          likes: 154
        },
        {
          image: '/static/images/decorate4.jpg',
          tag: '卫生间',
          title: '干湿分离卫生间设计，提升使用体验',
          description: '卫生间装修的布局和功能规划',
          author: '卫浴专家',
          likes: 142
        }
      ]
    };
  },
  methods: {
    toMaterial(){
      uni.switchTab({
        url: '/pages/material/material'
      })
    },
    // 添加轮播图点击跳转方法
    navigateToActivity(index) {
      // 可以根据不同的图片索引跳转到不同的活动页面
      switch(index) {
        case 0:
          uni.navigateTo({
            url: '/pages/activity/activity' // 替换为实际的活动页面路径
          });
          break;
        case 1:
          uni.navigateTo({
            url: '/pages/activity/activity' // 替换为实际的活动页面路径
          });
          break;
        case 2:
          uni.navigateTo({
            url: '/pages/activity/activity' // 替换为实际的活动页面路径
          });
          break;
        default:
          uni.navigateTo({
            url: '/pages/activity/activity' // 默认活动页面
          });
      }
    },
    navigateTo(url) {
      if (url) {
        uni.navigateTo({
          url: url
        });
      }
    },
    selectCity() {
      uni.showToast({
        title: '请选择城市',
        icon: 'none'
      });
    },
    switchTab(tab) {
      this.activeTab = tab;
    },
    viewCaseDetail(item) {
      uni.navigateTo({
        url: `/pages/case/detail?caseId=${item.id}`
      });
    },
    viewStrategyDetail(item) {
      uni.navigateTo({
        url: `/pages/strategy/detail?strategyId=${item.id}`
      });
    },
    viewDecorateDetail(item) {
      uni.navigateTo({
        url: `/pages/decorate/detail?decorateId=${item.id}`
      });
    }
  },
  mounted() {
    // 可在此处加载用户数据、门店信息等
  }
};
</script>